// 由于webpack是基于node.js进行开发的,所以可以识别所有node.js的代码
const path=require('path');
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时把打包好的bundle.js注入到首页
const HtmlWebpackPlugins=require('html-webpack-plugin');
// vue-loader需要一个伴生插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 模块导出代码
module.exports={
	// 当执行webpack或者webpack-dev-server打包命令的时候，会首先检查这个配置文件的入口与出口
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		// 指定输出选项
		path:path.join(__dirname,'./dist'),//输出目录
		filename:'bundle.js',  //输出文件名
	},
	
	// 所有插件的配置节点
	plugins:[
		// 配置html-webpack-plugin，使得可以生成html页面
		new HtmlWebpackPlugins({
			template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
			filename:'index.html'  //设置生成的内存页面的名称
		}),
		new VueLoaderPlugin()
	],
	// 配置所有第三方模块
	module:{
		// 第三方模块的匹配规则
		rules:[
			// 匹配后缀为css的第三方文件，使用加载器
			{test:/\.css$/,use:['style-loader','css-loader']},
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
			{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
			// 用于处理图片url路径的第三方模块匹配规则
			// {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader'},
			// 可以在下载器后面加?加参数，限制大小，使得图片不是base64位图片
			//这样的话，图片就可以通过url地址访问了
			// {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=900000'},
			// limit给定的值是图片的大小，单位是byte,当我们引用的图片大于或者等于给定的
			//limit值，则不会被转为base64位的字符串，如果图片小于给定的Limit值，则会被转为给定的base64位的字符串
			{test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=900000&name=[hash:8]-[name].[ext]'},
			// 结果为url(70a4b546-1.jpg)；
			//设置图片名称为hash前八位加上 ‘ - ’ 加上 ‘图片原来名称([name].[ext])’
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
			// 处理字体文件的loader
			// 使用exclude选项把node_modules目录下的文件排除掉
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
			// 除了babel-loader,还要安装@babel/plugin-proposal-class-properties，
			//@babel/preset-env，@babel/core@^7.0.0，core这个不用设置，但是需要安装
			{test:/\.vue$/,use:'vue-loader'},
		]
	},
	resolve:{
		//创建 import 或 require 的别名，来确保模块引入变得更简单
		alias:{
			// 修改vue被导入时候的包的路径
			"vue$":"vue/dist/vue.js"
		}
	},
	
}